<template>
  <div class="purchase-demo-page">
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <h2>购买功能演示</h2>
          <p>展示VIP购买功能的完整流程</p>
        </div>
      </template>
      
      <div class="demo-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="demo-section">
              <h3>用户状态</h3>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="用户名">
                  {{ userStore.userInfo?.name || '未登录' }}
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">
                  {{ userStore.userInfo?.email || '未登录' }}
                </el-descriptions-item>
                <el-descriptions-item label="VIP状态">
                  <el-tag :type="Number(userStore.userInfo?.isVIP) === 1 ? 'success' : 'info'">
                    {{ Number(userStore.userInfo?.isVIP) === 1 ? 'VIP用户' : '普通用户' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="账户状态">
                  <el-tag :type="userStore.userInfo?.isFrozen === 1 ? 'danger' : 'success'">
                    {{ userStore.userInfo?.isFrozen === 1 ? '已冻结' : '正常' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="demo-section">
              <h3>操作区域</h3>
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  size="large"
                  @click="showVipPurchase"
                  :disabled="Number(userStore.userInfo?.isVIP) === 1"
                >
                  {{ Number(userStore.userInfo?.isVIP) === 1 ? '已是VIP用户' : '购买VIP服务' }}
                </el-button>
                
                <el-button 
                  type="success" 
                  size="large"
                  @click="showCoursePurchase"
                >
                  购买课程
                </el-button>
                
                <el-button 
                  type="warning" 
                  size="large"
                  @click="refreshUserInfo"
                >
                  刷新用户信息
                </el-button>
              </div>
              
              <div class="demo-info">
                <h4>功能说明：</h4>
                <ul>
                  <li>点击"购买VIP服务"可以打开VIP购买弹窗</li>
                  <li>点击"购买课程"可以打开课程购买弹窗</li>
                  <li>购买成功后会自动更新用户状态</li>
                  <li>VIP用户无法再次购买VIP服务</li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    
    <!-- VIP购买弹窗 -->
    <PurchaseDialog
      v-model="showVipDialog"
      :products="vipProducts"
      title="VIP会员服务"
      header-title="选择您的VIP套餐"
      subtitle="升级VIP会员，享受更多特权"
      @purchase="handleVipPurchase"
    />
    
    <!-- 课程购买弹窗 -->
    <PurchaseDialog
      v-model="showCourseDialog"
      :products="courseProducts"
      title="课程购买"
      header-title="选择您要购买的课程"
      subtitle="购买课程，开始您的学习之旅"
      :show-features="false"
      @purchase="handleCoursePurchase"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { getVIPProductList, buyProduct } from '../api/user'
import { ElMessage } from 'element-plus'
import PurchaseDialog from '../components/PurchaseDialog.vue'

const userStore = useUserStore()

// 弹窗状态
const showVipDialog = ref(false)
const showCourseDialog = ref(false)

// 产品数据
const vipProducts = ref([])
const courseProducts = ref([
  {
    productID: 1,
    name: 'JavaScript基础课程',
    description: '从零开始学习JavaScript编程语言',
    price: 99
  },
  {
    productID: 2,
    name: 'Vue.js实战课程',
    description: '学习Vue.js框架开发现代Web应用',
    price: 199
  },
  {
    productID: 3,
    name: 'React高级课程',
    description: '深入React生态系统和最佳实践',
    price: 299
  }
])

// 获取VIP产品列表
const fetchVipProducts = async () => {
  try {
    const response = await getVIPProductList()
    if (response.code === 1) {
      vipProducts.value = response.data
    } else {
      ElMessage.error(response.message || '获取VIP产品列表失败')
    }
  } catch (error) {
    ElMessage.error('获取VIP产品列表失败')
    console.error('Error fetching VIP products:', error)
  }
}

// 显示VIP购买弹窗
const showVipPurchase = () => {
  if (vipProducts.value.length === 0) {
    fetchVipProducts()
  }
  showVipDialog.value = true
}

// 显示课程购买弹窗
const showCoursePurchase = () => {
  showCourseDialog.value = true
}

// 处理VIP购买
const handleVipPurchase = async (productID) => {
  try {
    const response = await buyProduct(productID)
    if (response.code === 1) {
      ElMessage.success('VIP购买成功！您的会员状态已更新')
      await userStore.fetchUserInfo()
      showVipDialog.value = false
    } else {
      ElMessage.error(response.message || '购买失败，请重试')
    }
  } catch (error) {
    ElMessage.error(error.message || '购买失败，请稍后再试')
    console.error('Error during VIP purchase:', error)
  }
}

// 处理课程购买
const handleCoursePurchase = async (productID) => {
  try {
    // 这里可以调用课程购买API
    ElMessage.success(`课程购买成功！课程ID: ${productID}`)
    showCourseDialog.value = false
  } catch (error) {
    ElMessage.error('课程购买失败，请稍后再试')
    console.error('Error during course purchase:', error)
  }
}

// 刷新用户信息
const refreshUserInfo = async () => {
  try {
    await userStore.fetchUserInfo()
    ElMessage.success('用户信息已刷新')
  } catch (error) {
    ElMessage.error('刷新用户信息失败')
    console.error('Error refreshing user info:', error)
  }
}

onMounted(() => {
  // 确保用户信息已加载
  if (!userStore.userInfo) {
    userStore.fetchUserInfo()
  }
})
</script>

<style scoped>
.purchase-demo-page {
  width: 80vw;
  padding: 20px;
  margin: 0 auto;
}

.demo-card {
  margin-bottom: 20px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
}

.card-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.demo-content {
  padding: 20px 0;
}

.demo-section {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  height: 100%;
}

.demo-section h3 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.action-buttons .el-button {
  width: 100%;
}

.demo-info {
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.demo-info h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
}

.demo-info ul {
  margin: 0;
  padding-left: 20px;
}

.demo-info li {
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}
</style> 